<template>
  <view class="oa-content">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed customBack :bottomShadow="false" backgroundColor="#FFFFFF">
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left-arrow'></text>
      </view>
      <view class="tn-flex tn-flex-col-center tn-flex-row-center ">
        <text class="tn-text-bold tn-text-xl tn-color-black">审批详情</text>
      </view>
    </tn-nav-bar>
    
    
    <view class="p-backgroup" :style="{paddingTop: vuex_custom_bar_height + 10 +'px'}">
      
      <view class="">
        <view class="tn-margin tn-padding-top" style="border-radius: 20rpx;height: 150rpx;background-color: #FFFFFF;">
          <tn-steps :list="list" :current="current1" mode="icon" activeColor="#00D05E" inActiveColor="#AAAAAA" @click="stepItemClick"></tn-steps>
          <view class="" style="background-color: #FFFFFF00;width: 100%;height: 150rpx;position: relative;top: -120rpx;">
          </view>
        </view>
        <view class="tn-margin tn-padding-top" style="border-radius: 20rpx;height: 150rpx;background-color: #FFFFFF;">
          <tn-steps :list="list" :current="current2" mode="icon" activeColor="#00D05E" inActiveColor="#AAAAAA" @click="stepItemClick"></tn-steps>
          <view class="" style="background-color: #FFFFFF00;width: 100%;height: 150rpx;position: relative;top: -120rpx;">
          </view>
        </view>
        <view class="tn-margin tn-padding-top" style="border-radius: 20rpx;height: 150rpx;background-color: #FFFFFF;">
          <tn-steps :list="list" :current="current3" mode="icon" activeColor="#00D05E" inActiveColor="#AAAAAA" @click="stepItemClick"></tn-steps>
          <view class="" style="background-color: #FFFFFF00;width: 100%;height: 150rpx;position: relative;top: -120rpx;">
          </view>
        </view>
        <view class="tn-margin tn-padding-top" style="border-radius: 20rpx;height: 150rpx;background-color: #FFFFFF;">
          <tn-steps :list="list" :current="current4" mode="icon" activeColor="#00D05E" inActiveColor="#AAAAAA" @click="stepItemClick"></tn-steps>
          <view class="" style="background-color: #FFFFFF00;width: 100%;height: 150rpx;position: relative;top: -120rpx;">
          </view>
        </view>
        <view class="tn-margin tn-padding-top" style="border-radius: 20rpx;height: 150rpx;background-color: #FFFFFF;">
          <tn-steps :list="list" :current="current5" mode="icon" activeColor="#00D05E" inActiveColor="#AAAAAA" @click="stepItemClick"></tn-steps>
          <view class="" style="background-color: #FFFFFF00;width: 100%;height: 150rpx;position: relative;top: -120rpx;">
          </view>
        </view>
        
      </view>
    
    </view>
    
    
    <view class="tn-tabbar-height"></view>
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateWork',
    mixins: [template_page_mixin],
    data(){
      return {
        current1: 1,
        current2: 2,
        current3: 3,
        current4: 4,
        current5: 5,
        list: [
          {
            name: '待审批',
            icon: 'time',
            selectIcon: 'time-fill'
          },
          {
            name: '审批中',
            icon: 'light',
            selectIcon: 'light-fill'
          },
          {
            name: '已流转',
            icon: 'safe',
            selectIcon: 'safe-fill'
          },
          {
            name: '审批中',
            icon: 'light',
            selectIcon: 'light-fill'
          },
          {
            name: '已通过',
            icon: 'success-circle',
            selectIcon: 'success-circle-fill'
          }
        ]
      }
    },
    methods: {
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      stepItemClick(e) {
        this.current = e.index
      }
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 60%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.15);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    color: #FFFFFF;
    font-size: 32rpx;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
  }
  
  .oa-content{
    max-width: 640px;
    margin: 0 auto;
    background-color: #F8F7F8;
    min-height: 100vh;
    padding-bottom: 60rpx;
    padding-bottom: calc(80rpx + env(safe-area-inset-bottom) / 2);
    padding-bottom: calc(80rpx + constant(safe-area-inset-bottom));
  }

</style>
